import React, { useState } from 'react'
import style from './index.module.css'
import type { DatePickerProps } from 'antd';
import { DatePicker, Space, theme, Button } from 'antd';
import type { Dayjs } from 'dayjs';
// 国际化
import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
import { ConfigProvider } from 'antd';

function index() {
    // 日历
    const { token } = theme.useToken();
    const style1: React.CSSProperties = {
        border: `1px solid ${token.colorPrimary}`,
        borderRadius: '50%',
    };
    const cellRender: DatePickerProps<Dayjs>['cellRender'] = (current, info) => {
        if (info.type !== 'date') {
            return info.originNode;
        }
        if (typeof current === 'number' || typeof current === 'string') {
            return <div className="ant-picker-cell-inner">{current}</div>;
        }
        return (
            <div className="ant-picker-cell-inner" style={current.date() === 1 ? style1 : {}}>
                {current.date()}
            </div>
        );
    };
    const [selectedValue, setSelectedValue] = useState("");

    const handleChange = (event) => {
        setSelectedValue(event.target.value);
    };
    // 搜索
    const [search, setSearch] = useState('')
    const handleSearchChange = (e) => {
        console.log(e.target.value);

    }
    const SEARCH = () => {

    }
    return (
        <div className={style.box}>
            <h3 style={{ margin: "2% 0" }}>果币</h3>
            <div style={{ display: "flex" }}>
                <select className={style.XiaLa} value={selectedValue} onChange={handleChange}>
                    <option value="" disabled>业务类型</option>
                    <option value="recharge">充值</option>
                    <option value="order">订单消费</option>
                    <option value="refund">退款</option>
                </select>
                <p>店铺名称: <input type="text" placeholder='&emsp;请输入店铺名称' className={style.inp} onChange={handleSearchChange} /></p>
                <p style={{ marginLeft: "3%" }}>手机号: <input type="text" placeholder='&emsp;请输入手机号码' className={style.inp} /></p>
            </div>
            <div>
                <ConfigProvider locale={locale}>
                    日期查询: <Space size={12} direction="vertical" className={style.RiQi}>
                        <DatePicker.RangePicker cellRender={cellRender} />
                    </Space>
                    <Button type="primary" onClick={SEARCH}>查询</Button>
                    <Button>导出</Button>
                </ConfigProvider>
            </div>
        </div>
    )
}

export default index
